<template>
  <div class="news">
    <div class="common-title">
      <h1>获奖作品</h1>
      <p>China New Information Consumption Competition News</p>
    </div>
    <div class="news-list" v-if="worksList.length > 0">
      <div
        class="news-item"
        v-for="item in worksList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <div class="item-left">
          <h1>{{ dayjs(item.created_at * 1000).format("DD") }}</h1>
          <p>{{ dayjs(item.created_at * 1000).format("YYYY-MM") }}</p>
        </div>
        <div class="item-right">
          <h1 class="one-write">{{ item.title }}</h1>
          <p class="thr-write">{{ item.sub_title }}</p>
          <div class="see-more">查看详情</div>
        </div>
      </div>
    </div>
    <div class="no-data" v-else>暂无数据哦~</div>
    <div class="page-box" v-if="worksLastPage > 1">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="perPage"
        layout="prev, pager, next"
        :total="worksPageTotal"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      page: 1,
      perPage: 10,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["getWorksList"]),
    init() {
      this.getList();
    },
    getList() {
      let data = {
        per_page: this.perPage,
        page: this.page,
      };
      this.getWorksList(data);
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage;
      this.getList();
    },
    goDetail(id) {
      this.$router.push({
        name: "works-show",
        query: { id: id },
      });
    },
  },
  computed: {
    ...mapGetters([
      "worksList",
      "worksPageTotal",
      "worksLastPage"
    ]),
  },
  watch: {
    $route(to) {
      this.categoryId = to.query.category_id;
      this.categoryName = to.query.category_name;
      this.getList();
    },
  },
};
</script>
<style scoped>
.news {
  width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 100px;
}
.news-list {
  width: 1200px;
  margin: 40px auto;
  min-height: 400px;
}
.no-data {
  font-size: 16px;
  color: #999;
  text-align: center;
  height: 400px;
  line-height: 400px;
}
.news-item {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  align-items: center;
}
.item-left {
  width: 95px;
  height: 95px;
  background: #0b4696;
  color: #ffffff;
  text-align: center;
  font-family: Source Han Sans CN;
}
.item-left h1 {
  font-size: 36px;
  font-weight: 400;
  margin-top: 20px;
}
.item-left p {
  font-size: 16px;
}

.item-right {
  box-sizing: border-box;
  width: 1105px;
  height: 210px;
  border: 1px solid #e6e6e6;
  padding: 23px 57px;
}
.item-right h1 {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.item-right p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
  text-align: justify;
  margin-top: 20px;
}
.see-more {
  width: 100px;
  height: 32px;
  background: #b3b3b3;
  font-size: 14px;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
  margin-top: 15px;
}
.news-item:hover .item-right {
  background: #f0f0f0;
}
.news-item:hover .see-more {
  background: #0b4696;
}
</style>